<template>
  <div style="width: 256px">
    <a-menu
      :selectedkeys="['1']"
      :openkeys="['2']"
      mode="inline"
      :theme="theme"
      :inline-collapsed="collapsed"
    >
      <template v-for="item in menuData">
        <a-menu-item v-if="!item.children" :key="item.path">
          <a-icon v-if="item.meta.icon" :type="item.meta.icon" />
          <span>{{ item.meta.title }}</span>
        </a-menu-item>
        <sub-menu v-else :key="item.key" :menu-info="item" />
      </template>
    </a-menu>
  </div>
</template>

<script>
import SubMenu from "./SubMenu";
import {check} from "../utils/auth";
export default {
  props: {
    theme: {
      type: String,
      default: "dark",
    },
  },
  components: {
    "sub-menu": SubMenu,
  },
  data() {
    const menuData = this.getMenuData(this.$router.options.routes);
    return {
      collapsed: false,
      menuData,
    };
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    getMenuData(routes) {
      const menuData = [];
      for (let element of routes) {
        if(element.meta&&element.meta.authority&&!check(element.meta.authority))
        {
          break;
        }
        if (element.name && !element.HideInMenu) {
          const newItem = { ...element };
          delete newItem.children;
          if (element.children && !element.HideChildrenInMenu) {
            newItem.children = this.getMenuData(element.children);
          }
          menuData.push(newItem);
        } else if (
          !element.HideInMenu &&
          !element.HideChildrenInMenu &&
          element.children
        ) {
          menuData.push(...this.getMenuData(element.children));
        }
      }

      return menuData;
    },
  },
};
</script>
